<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iconfont</title>
  <link rel="stylesheet" type="text/css" href="{{cssUrl}}">
  <style>
    body {
      padding: 0;
      font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    }
    ul {
      padding: 0;
      margin: 0;
    }
    ul.kaitian-icons {
      margin: 10px 0;
      overflow: hidden;
      list-style: none;
    }
    ul.kaitian-icons li {
      position: relative;
      float: left;
      width: 16.66%;
      height: 100px;
      margin: 3px 0;
      padding: 10px 0 0;
      overflow: hidden;
      color: #555;
      text-align: center;
      list-style: none;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
      transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    ul.kaitian-icons li::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #fff;
      line-height: 110px;
      text-align: center;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
      content: 'Copied!';
    }

    ul.kaitian-icons li.copied::after {
      top: -10px;
      opacity: 1;
    }

    ul.kaitian-icons li:hover {
      color: #fff;
      background-color: #1890ff;
    }

    ul.kaitian-icons li.copied:hover {
      color: rgba(255, 255, 255, 0.2);
    }

    .kaitian-icon {
      margin: 12px 0 8px;
      font-size: 36px;
      transition: transform 0.3s ease-in-out;
      will-change: transform;
    }

    .icon-name-wrapper {
      white-space: nowrap;
      text-align: center;
      margin-top: 10px;
    }

    .icon-name {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <h2>
      OpenSumi built-in icon list
    </h2>
    <p>ide-framework v{{version}}</p>
    <p>{{cssUrl}}</p>

    <div>click to copy icon name</div>
  </div>

  <ul class="kaitian-icons" id="kaitian-icons">
    {{#each iconList}}
      <li data-icon="{{this}}">
        <i
          aria-label="图标: {{this}}"
          class="kaitian-icon kticon-{{this}}">
        </i>
        <div class="icon-name-wrapper">
          <span class="icon-name">{{this}}</span>
        </div>
      </li>
    {{/each}}
  </ul>

  <script>
    document.querySelector('.kaitian-icons').addEventListener('click', e => {
      e.preventDefault();
      const $iconTargetLi = e.target.nodeName === 'LI' ? e.target : event.target.closest('li');
      if ($iconTargetLi) {
        const iconName = $iconTargetLi.getAttribute('data-icon');
        window.navigator.clipboard.writeText(iconName)
          .then(() => {
            $iconTargetLi.classList.add('copied');
            setTimeout(() => {
              $iconTargetLi.classList.remove('copied');
            }, 1000);
            console.log('copied success')
          })
          .catch(err => console.log(err))
      }
    });
  </script>
</body>
</html>
